<template>
  <div class="root">
    <van-overlay :show="show" class="zhezhao">
      <van-area
        :area-list="areaList1"
        title="请选择地址"
        :value="data.post_code"
        @confirm="send"
        :class="show ? 'upChooseCity' : 'chooseCity'"
        ref="root"
        @cancel="show=!show"
      />
    </van-overlay>
    <van-cell-group class="form" >
      <van-field
        label="请选择地址"
        readonly
        @click="show = !show"
        v-model="data.area_name"
        
      />
      <van-field label="小区" v-model="data.desc" />
      <van-field label="楼号/门牌号" v-model="data.area" />
      <van-field label="收货人" v-model="data.name" />
      <van-field label="联系电话" v-model="data.phone" />
       <div class="chooseDefault" v-show="btnShow">  <span >是否设为默认地址</span>      <van-switch v-model="data.default_set" /></div>
    </van-cell-group>
   
      <van-button type="danger" round   class="upload" v-show="btnShow" @click="confirm">删除地址</van-button>
    
     
  </div>
</template>
<script>


</script>
<script setup>
import { ref, reactive ,watch,watchEffect} from "vue";
import { areaList } from "@vant/area-data";
import { useStore } from "vuex";
import { deleteData } from "../../../utils/request.js";
import { setSession, getSession } from "../../../utils/index.js";
import { Toast ,Dialog } from "vant";
import { useRoute, useRouter } from "vue-router";
import { useClickAway } from '@vant/use';
const router = useRouter();
const store = useStore();

const areaList1=ref(areaList)
const show = ref(false);
const btnShow = ref(false);
const code = ref("");
let result = getSession("result");
const data = ref({
  name: '',
  phone: '',
  password: result.password,
  area:"",
  area_name: null,
  post_code: "",
  desc: "",
  default_set:false
});


let address=getSession('address')
if (address&&store.state.address.isTransformData) {
  data.value=address
  btnShow.value=true
}
watch([data.value], (oldData, newData)=>{
                   store.commit('address/setAddress',data.value)

                },{immediate:true,deep:true})
//处理城市的输入
const send = (value, index) => {
  console.log(value, index);
  show.value = false;
  data.value.post_code = value[2].code;
  console.log(value[2].code);
  data.value.area_name=''
  value.forEach((ele, index) => {
     data.value.area_name = data.value.area_name + " " + ele.name;
  });
   

};

const confirm=()=>{
  Dialog.confirm({
  title: '删除地址',
  message:
    '您是否要删除此项地址？',
})
  .then(() => {
    deleteAddress()
  })
  .catch(() => {
    // on cancel
  });
}
const deleteAddress= async()=>{
console.log(store.state.address.address.id);
let result
  try {
    result = await deleteData(`/address/${store.state.address.address.id}`);  
   
  } catch (error) {
    console.log(error);
    let timer=setTimeout(() => {
      Toast.clear();
      Toast.fail({message:'删除失败，请稍后重新尝试', forbidClick: true,})
      clearTimeout(timer)
    }, 3000);
  }
 if (result.status == 200) {
 
      router.push("/myaddress");

 }
}

</script>

<style scoped lang="scss">
.root{
display: flex;
flex-direction: column;
align-items: center;
  .zhezhao {
  position: fixed;
  top: 0;
  .chooseCity {
    width: 100%;
    position: absolute;
    top: 100%;
    transition: all 1s ease;
    label {
      font-size: 20px !important;
      color: black !important;
    }
  }
  .upChooseCity {
    width: 100%;
    position: absolute;
    top: 54.2vh;
    transition: all 1s ease;
  }
}

.form {
  margin-top: 1.7vh;
  width: 100%;
  .chooseDefault{
    width: 100%;
    float: right;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 1vw;
    
    height: 7vh;
    color: #aea7a7;
    span{
      display: block;
      margin-left: 5vw;
    }
}
}
button{
 margin-top: 1.7vh;
  width: 80vw;
  height: 8vh;
}
}

</style>
